<template>
    <div class="comment-warp">
        <h3 class="title">评论</h3>
        <div class="list">
            <div class="item" v-for="(items,index) in commentList" :key="index">
                <div class="avatar">
                    <comment-image width="0.8rem" height="0.8rem" radius="0.8rem" fit="cover" :src="items.avatar"></comment-image>
                </div>
                <div class="content">
                    <div class="name">
                        <span>{{items.nickname}}</span>
                    </div>
                    <div class="text">{{items.comment}}</div>
                    <div class="bottom">
                        <div class="time">{{items.create_time}}</div>
                        <div class="btn">
                            <span class="off" @click="onReply(items)">回复</span>
                        </div>
                    </div>
                    <div class="children" v-show="items.showChildren">
                        <div class="child-item" v-for="(item,index) in items.children" :key="index">
                            <div class="c-avatar">
                                <comment-image width="0.6rem" height="0.6rem" radius="0.6rem" fit="cover" :src="item.avatar"></comment-image>
                            </div>
                            <div class="c-content">
                                <div class="c-name">
                                    <span>{{item.nickname}}</span>
                                    <i v-if="item.toname" class="iconfont icon-arrow-right-filling"></i>
                                    <span>{{item.toname}}</span>
                                </div>
                                <div class="c-text">{{item.comment}}</div>
                                <div class="c-bottom">
                                    <div class="c-time">{{item.create_time}}</div>
                                    <div class="c-btn">
                                        <span class="c-off" @click="onReply(item)">回复</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="open" v-if="items.sum" @click="onChildren(items)">
                        <span v-if="items.showChildren">收起</span>
                        <span v-else>展开{{items.sum}}条回复</span>
                        <i v-if="items.showChildren" class="iconfont icon-arrow-up-filling"></i>
                        <i v-else class="iconfont icon-arrow-down-filling"></i>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="commentList.length == 0" class="info">暂无评论~</div>
    </div>
</template>

<script>
import CommentImage from '../Common/Image/Index'
export default {
    name: 'CommentWarp',
    components: {
        CommentImage
    },
    props: {
        commentList: {
            type: Array
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        onChildren(e) {
            if(e.showChildren) {
                e.showChildren = false
            }else{
                e.showChildren = true
            }
        },
        onReply(e) {
            this.$emit('onReply',e)
        }
    }
}
</script>

<style scoped>
.comment-warp{
    padding:0 0.2rem;
}
.comment-warp .title{
    color:#333;
    border-top:1px solid #eee;
    padding:0.1rem 0 0.2rem 0;
    font-size:0.4rem;
}
.comment-warp .list .item{
    display: flex;
    margin-bottom:0.3rem;
}
.comment-warp .list .item .avatar{
    margin-right:0.2rem;
}
.comment-warp .list .item .content{
    flex:1;
}
.comment-warp .list .item .content .name{
    font-size:0.28rem;
    font-weight: 600;
    color:#376097;
    margin-bottom:0.08rem;
}
.comment-warp .list .item .content .text{
    font-size:0.3rem;
    font-weight: 600;
    color:#000;
}
.comment-warp .list .item .content .bottom{
    margin-top:0.2rem;
    display: flex;
    align-items: center;
    color:#999;
}
.comment-warp .list .item .content .bottom .time{
    font-size:0.24rem;
    font-weight:600;
    margin-right:0.3rem;
}
.comment-warp .list .item .content .bottom .btn{
    font-size:0.24rem;
}
.comment-warp .list .item .content .bottom .btn .off{
    font-size:0.24rem;
    font-weight:600;
    color:#666;
}
.comment-warp .list .item .content .open{
    margin-top:0.1rem;
    font-size:0.24rem;
    padding-left:0.74rem;
    position: relative;
}
.comment-warp .list .item .content .open::before{
    content:"";
    position: absolute;
    left:0;
    top:50%;
    width:0.5rem;
    height:0.02rem;
    background:#999;
}
.comment-warp .list .item .content .open span{
    color:#999;
    font-size:0.24rem;
}
.comment-warp .list .item .content .open .iconfont{
    color:#999;
    margin-left:0.04rem;
    font-size:0.24rem;
}
.comment-warp .list .item .children .child-item{
    margin-top:0.2rem;
    display: flex;
}
.comment-warp .list .item .children .child-item .c-avatar{
    margin-right:0.16rem;
}
.comment-warp .list .item .children .child-item .c-content{
    flex:1;
}
.comment-warp .list .item .children .child-item .c-content .c-name{
    font-size:0.26rem;
    margin-bottom:0.08rem;
    color:#376097;
}
.comment-warp .list .item .children .child-item .c-content .c-name span{
    font-size:0.26rem;
    font-weight:600;
}
.comment-warp .list .item .children .child-item .c-content .c-name .iconfont{
    font-size:0.26rem;
    margin:0 0.1rem;
}
.comment-warp .list .item .children .child-item .c-content .c-text{
    font-size:0.28rem;
    font-weight:600;
}
.comment-warp .list .item .children .child-item .c-content .c-bottom{
    margin-top:0.2rem;
    display: flex;
    align-items: center;
    color:#999;
}
.comment-warp .list .item .children .child-item .c-content .c-bottom .c-time{
    font-size:0.24rem;
    font-weight:600;
    margin-right:0.3rem;
}
.comment-warp .list .item .children .child-item .c-content .c-bottom .c-btn{
    font-size:0.24rem;
    font-weight:600;
    color: #666;
}
.comment-warp .info{
    text-align: center;
    font-size:0.32rem;
    font-weight:600;
    color:#999;
    padding:0.4rem 0;
}
</style>